<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本格式化属性</title>
		<style>
			*{
				font-family:sans-serif;
				font-size: 1.5em;
				font-weight: 800;
				font-style: italic;
				text-transform: uppercase;
				text-transform: lowercase;
				text-transform: capitalize;
				text-indent: 200px;
			}
			h1+p{
				bord er: 1px solid red;
				text-algin: justify;
				height: 40px;
				line-height: 40px;
				letter-spacing: 2px;
			}
			div a{
				border: 2px solid #ccc;
				padding: 8px;
				margin-left: 5px;
			}
			div a.current{
				border: 0;
				color: #000;
				text-decoration: none;
			}
			div p{
				text-shadow: 5px 5px 10px #0055ff;
			}
			div>span{
				border: 1px solid red;
				white-space: nowrap;
				white-space: pre;
				white-space: normal;
			}
		</style>
	</head>
	<body>
		<h1>控制字体属性：font-family,font-size,font-weight</h1>
		Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iste quibusdam ut, impedit vitae ratione recusandae suscipit sapiente fugit voluptate numquam, perspiciatis aliquam sequi deleniti dolorem animi mollitia culpa ad id.
		<h1>控制文本布局：text-algin,line-height</h1>
		<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Esse at quidem atque, enim itaque velit expedita ipsa eaque, tempora unde, illo nostrum. Voluptatibus a quod quia, doloribus voluptate officiis iure.</p>
		<h1>文本装饰效果</h1>
		<div>
		    <a href="#" class="current">1</a>
		    <a href="#">2</a>
		    <a href="#">3</a>
		    <a href="#">4</a>
		    <a href="#">5</a>
		    <p>文本阴影效果</p>
		</div>
		<h1>处理文本溢出与换行</h1>
		<div>
		    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Distinctio aliquid deserunt, eligendi possimus alias esse dicta facilis maxime quam nihil harum similique rem nam mollitia adipisci earum, laudantium voluptatem qui.
		</div>
	</body>
</html>